<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix"><span>快速添加</span></div>
      <el-form label-width="100px" :model="quickRule" :rules="rules" ref="formQuickAdd">
        <el-form-item label="授权策略">
          <el-radio v-model="quickRule.policy" label="ACCEPT">允许</el-radio>
          <el-radio v-model="quickRule.policy" label="DROP">拒绝</el-radio>
        </el-form-item>
        <el-form-item label="协议类型" prop="protocol">
          <el-select v-model="quickRule.protocol" placeholder="请选择" style="width:100%;">
            <el-option label="TCP" value="tcp"></el-option>
            <el-option label="UDP" value="udp"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="授权端口" prop="port">
          <el-select v-model.number="quickRule.port" filterable allow-create default-first-option style="width:100%;">
            <el-option label="SSH (22)" value="22"></el-option>
            <el-option label="telnet (23)" value="23"></el-option>
            <el-option label="HTTP (80)" value="80"></el-option>
            <el-option label="HTTPS (443)" value="443"></el-option>
            <el-option label="Oracle (1521)" value="1521"></el-option>
            <el-option label="Mysql (3306)" value="3306"></el-option>
            <el-option label="Redis (6379)" value="863790"></el-option>
          </el-select>
        </el-form-item>
          <el-form-item label="授权对象">
            <el-select v-model="quickRule.target" filterable allow-create default-first-option style="width:100%;">
              <el-option label="0.0.0.0/0" value="0.0.0.0/0"></el-option>
              <el-option label="10.0.0.0/8" value="10.0.0.0/8"></el-option>
              <el-option label="172.16.0.0/12" value="172.16.0.0/12"></el-option>
              <el-option label="192.168.0.0/16" value="192.168.0.0/16"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="描述说明">
            <el-input v-model="quickRule.comment"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="actionQuickAdd">创建</el-button>
          </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>
<script>
export default {
    data() {
        return {
            quickRule : {policy:'ACCEPT'},
            rules : {
                protocol : { required: true, message: '请选择授权协议类型', trigger: 'blur' },
                port : [
                    { required: true, message: '请选择指定端口', trigger: 'blur' },
                    { type : 'number', min : 1, max : 65535, message : '请输入有效的端口号', trigger:'blur'}
                ],
            },
        };
    },
    methods : {
        /** 快速添加 */
        async actionQuickAdd () {
            try {
                await this.$refs.formQuickAdd.validate();
            } catch {
                return;
            }

            let inputCmd = ['sudo iptables -A INPUT -t filter'];
            inputCmd.push(`-p ${this.quickRule.protocol}`);
            
            if ( undefined == this.quickRule.port ) {
                this.$message.error('请指定端口范围');
                return;
            }
            inputCmd.push(`--dport ${this.quickRule.port}`);
            
            if ( undefined != this.quickRule.target ) {
                inputCmd.push(`-s ${this.quickRule.target}`);
            }
            
            if ( undefined != this.quickRule.comment ) {
                inputCmd.push(`-m comment --comment "${this.quickRule.comment}"`);
            }

            inputCmd.push(`-j ${this.quickRule.policy}`);
            
            inputCmd = inputCmd.join(' ');
            
            let server = this.$store.getters.serverCurrent;
            let client = await server.getSshClient();

            await client.exec(inputCmd);
            this.$emit('quick-add-success');
            this.$message({message: '操作成功，新规则已添加',type: 'success'});
            this.quickRule = {policy:'ACCEPT'};
        },
    }
}
</script>